{% extends "wagtailadmin/base.html" %}
{% load wagtailimages_tags %}
{% load i18n %}
{% block titletag %}{% trans "Add user" %}{% endblock %}
{% block content %}

    {% trans "Add user" as add_user_str %}
    {% include "wagtailadmin/shared/header.html" with title=add_user_str merged=1 icon="user" %}

    <div class="w-tabs" data-tabs>
        <div class="w-tabs__wrapper">
            <div role="tablist" class="w-tabs__list">
                {% trans "Account" as account_text %}
                {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='account' title=account_text %}
                {% trans "Roles" as roles_text %}
                {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='roles' title=roles_text %}
            </div>
        </div>

        <form action="{% url 'wagtailusers_users:add' %}" method="POST" novalidate{% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>
            <div class="tab-content">
                {% csrf_token %}
                <section
                    id="tab-account"
                    class="w-tabs__panel"
                    role="tabpanel"
                    hidden
                    aria-labelledby="tab-label-account"
                >
                    <ul class="fields">
                        {% block fields %}
                            {% if form.separate_username_field %}
                                {% include "wagtailadmin/shared/field_as_li.html" with field=form.username_field %}
                            {% endif %}
                            {% include "wagtailadmin/shared/field_as_li.html" with field=form.email %}
                            {% include "wagtailadmin/shared/field_as_li.html" with field=form.first_name %}
                            {% include "wagtailadmin/shared/field_as_li.html" with field=form.last_name %}
                            {% block extra_fields %}{% endblock extra_fields %}
                            {% if form.password1 %}
                                {% include "wagtailadmin/shared/field_as_li.html" with field=form.password1 %}
                            {% endif %}
                            {% if form.password2 %}
                                {% include "wagtailadmin/shared/field_as_li.html" with field=form.password2 %}
                            {% endif %}
                        {% endblock fields %}

                        <li>
                            <a href="#tab-roles" data-tab-trigger class="button lowpriority icon icon-arrow-right-after">
                                {% trans "Roles" %}
                            </a>
                        </li>
                    </ul>
                </section>
                <section
                    id="tab-roles"
                    class="w-tabs__panel"
                    role="tabpanel"
                    hidden
                    aria-labelledby="tab-label-roles"
                >
                    <ul class="fields">
                        {% include "wagtailadmin/shared/field_as_li.html" with field=form.is_superuser %}
                        {% include "wagtailadmin/shared/field_as_li.html" with field=form.groups %}
                        <li><button class="button">{% trans "Add user" %}</button></li>
                    </ul>
                </section>
            </div>
        </form>
    </div>
{% endblock %}

{% block extra_css %}
    {{ block.super }}
    {{ form.media.css }}
{% endblock %}
{% block extra_js %}
    {{ block.super }}
    {% include "wagtailadmin/pages/_editor_js.html" %}
    {{ form.media.js }}
{% endblock %}
